<template>
  <el-dialog
    v-model="visible"
    title="就医费用支付"
    width="500px"
    :close-on-click-modal="false"
  >
    <div class="payment-info">
      <div class="info-item">
        <span class="label">医院：</span>
        <span class="value">{{ record.hospitalName }}</span>
      </div>
      <div class="info-item">
        <span class="label">科室：</span>
        <span class="value">{{ record.department }}</span>
      </div>
      <div class="info-item">
        <span class="label">医生：</span>
        <span class="value">{{ record.doctorName }}</span>
      </div>
      <div class="info-item">
        <span class="label">就医时长：</span>
        <span class="value">{{ formatDuration(record.duration) }}</span>
      </div>
      <div class="info-item">
        <span class="label">开始时间：</span>
        <span class="value">{{ formatDateTime(record.visitTime) }}</span>
      </div>
      <div class="info-item">
        <span class="label">结束时间：</span>
        <span class="value">{{ formatDateTime(record.endTime) }}</span>
      </div>
      <div class="info-item amount">
        <span class="label">支付金额：</span>
        <span class="value">¥{{ record.amount }}</span>
      </div>
    </div>

    <div class="payment-methods">
      <div class="section-title">选择支付方式</div>
      <el-radio-group v-model="selectedMethod">
        <el-radio label="CREDIT">信用支付</el-radio>
        <el-radio label="WECHAT">微信支付</el-radio>
        <el-radio label="ALIPAY">支付宝</el-radio>
      </el-radio-group>
    </div>

    <div v-if="selectedMethod === 'CREDIT'" class="credit-info">
      <el-alert
        type="info"
        :closable="false"
        show-icon
      >
        <template #title>
          信用支付说明
        </template>
        <template #default>
          <p>使用信用支付将直接从您的信用账户中扣除相应金额</p>
          <p>当前信用余额：¥{{ creditBalance }}</p>
        </template>
      </el-alert>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loading">
          确认支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { formatDateTime } from '@/utils/format'
import { paymentApi } from '@/api/payment'

export default {
  name: 'MedicalPaymentDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      required: true
    }
  },
  emits: ['update:modelValue', 'payment-success'],
  setup(props, { emit }) {
    const store = useStore()
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => emit('update:modelValue', val)
    })

    const selectedMethod = ref('CREDIT')
    const loading = ref(false)
    const creditBalance = computed(() => store.state.user.creditBalance || 0)

    const formatDuration = (minutes) => {
      if (!minutes) return '0分钟'
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      return hours > 0 ? `${hours}小时${mins}分钟` : `${mins}分钟`
    }

    const handleCancel = () => {
      visible.value = false
    }

    const handleConfirm = async () => {
      if (selectedMethod.value === 'CREDIT' && creditBalance.value < props.record.amount) {
        ElMessage.warning('信用余额不足，请选择其他支付方式')
        return
      }

      loading.value = true
      try {
        const response = await paymentApi.createPayment({
          orderId: props.record.id,
          orderType: 'MEDICAL',
          amount: props.record.amount,
          paymentMethod: selectedMethod.value
        })

        if (selectedMethod.value === 'CREDIT') {
          // 信用支付直接完成
          await paymentApi.completePayment(response.data.paymentId)
          ElMessage.success('支付成功')
          emit('payment-success')
          visible.value = false
        } else {
          // 跳转到第三方支付
          window.location.href = response.data.paymentUrl
        }
      } catch (error) {
        ElMessage.error(error.response?.data || '支付失败')
      } finally {
        loading.value = false
      }
    }

    return {
      visible,
      selectedMethod,
      loading,
      creditBalance,
      formatDateTime,
      formatDuration,
      handleCancel,
      handleConfirm
    }
  }
}
</script>

<style scoped>
.payment-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  line-height: 20px;
}

.info-item .label {
  width: 80px;
  color: #606266;
}

.info-item .value {
  flex: 1;
  color: #303133;
}

.info-item.amount {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #EBEEF5;
}

.info-item.amount .value {
  color: #F56C6C;
  font-size: 20px;
  font-weight: bold;
}

.payment-methods {
  margin-bottom: 20px;
}

.section-title {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.credit-info {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style> 